<template>
	<view class="pages">
		<view class="bac"></view>
		<view class="outer">
			<!-- 步骤条（放入卡片内） -->
			<view class="card steps-card">
				<view class="steps">
					<view class="step done">
						<view class="dot green">预约服务</view>
					</view>
					<view class="step done">
						<view class="dot blue">支付订单</view>
					</view>
					<view class="step">
						<view class="dot orange">门店服务</view>
					</view>
				</view>
			</view>

			<!-- 信息卡片 -->
			<view class="card">
				<view class="row">
					<view class="left with-ico">
						<view class="ico store"></view>
						<view>
							<view class="title">{{ store.name }}</view>
							<view class="sub">{{ store.addr }}</view>
						</view>
					</view>
					<view class="right arrow"></view>
				</view>

				<view class="row" @click="showPhoneModal">
					<view class="left with-ico">
						<view class="ico user"></view>
						<view>张先生</view>
					</view>
					<view class="right">18656894566</view>
				</view>

				<view class="row" @click="toprepare">
					<view class="left with-ico">
						<view class="ico time"></view>
						<view>{{ reserveDisplay }}</view>
					</view>
					<view class="right arrow"></view>
				</view>

				<navigator class="row" url="/pages/Maintenance/chooseCar/chooseCar">
					<view class="left with-ico">
						<view class="ico car"></view>
						<view>奔驰FWE4/豫A56487</view>
					</view>
					<view class="right arrow"></view>
				</navigator>
			</view>

			<!-- 服务产品 -->
			<view class="card">
				<view class="card-hd">
					<view>服务产品</view>
					<view class="muted">共选择{{ products.length }}项服务产品</view>
				</view>
				<view class="prod" v-for="(p, i) in products" :key="i">
					<view class="bullet"></view>
					<view class="name">{{ p.name }}</view>
					<view class="price"><text class="yen">¥</text>{{ p.price }}</view>
				</view>
				<view class="coupon-row">
					<view class="coupon-left">代金券/优惠券</view>
					<view class="coupon-right danger">-{{ discountText }}</view>
				</view>
			</view>
		</view>

		<!-- 底部栏 -->
		<view class="bottom-bar">
			<view class="service">联系客服</view>
			<view class="total">合计：<text>¥ {{ total }}</text></view>
			<button class="submit" @click="submitOrder">提交订单</button>
		</view>

		<!-- 预约时间弹窗 -->
		<view class="modal-mask" v-if="showReserve" @click="closeReserve">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<view class="modal-title">预约时间</view>
					<view class="modal-sub">请选择您方便的服务时间</view>
				</view>
				<view class="modal-body">
					<!-- 滑动选择器 -->
					<scroll-view 
						class="time-scroll" 
						scroll-y="true" 
						:scroll-top="scrollTop"
						:scroll-into-view="scrollIntoView"
					>
						<view class="time-list">
							<view 
								v-for="(item, index) in timeOptions" 
								:key="index"
								:id="'time-' + index"
								class="time-item" 
								:class="{ 
									'time-item-selected': selectedTimeIndex === index,
									'time-item-disabled': item.disabled 
								}"
								@click="selectTime(index)"
							>
								<view class="time-date">{{ item.date }}</view>
								<view class="time-time">{{ item.time }}</view>
								<view class="time-week">{{ item.week }}</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="modal-footer">
					<button class="btn-cancel" @click="closeReserve">取消</button>
					<view class="divider"></view>
					<button class="btn-confirm" @click="confirmReserve">确定</button>
				</view>
			</view>
		</view>

		<!-- 电话号码弹窗 -->
		<view class="phone-modal-mask" v-if="showPhone" @click="closePhoneModal">
			<view class="phone-modal-content" @click.stop>
				<view class="phone-number">{{ phoneNumber }}</view>
				<view class="phone-buttons">
					<button class="btn-copy" @click="copyPhone">复制</button>
					<button class="btn-cancel-dial" @click="closePhoneModal">取消拨号</button>
				</view>
			</view>
		</view>

		<!-- 支付密码弹窗 -->
		<view class="pay-modal-mask" v-if="showPayModal" @click="closePayModal">
			<view class="pay-modal-content" @click.stop>
				<view class="pay-modal-title">请输入支付密码</view>
				<view class="pay-modal-desc">车辆服务平台</view>
				<view class="pay-modal-amount">¥ {{ total }}</view>
				<!-- 支付方式选择 -->
				<view class="pay-method">
					<view class="pay-method-label">支付方式</view>
					<view class="pay-method-value">零钱 >></view>
				</view>
				<!-- 密码输入区域 -->
				<view class="pay-password">
					<view class="password-dot" v-for="i in 6" :key="i"></view>
				</view>
				<view class="pay-footer">
					<button class="btn-cancel-pay" @click="closePayModal">取消</button>
					<view class="divider"></view>
					<button class="btn-confirm-pay" @click="confirmPay">确认支付</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue'

	const store = ref({
		name: '伟业汽车美容店（人民路店）',
		addr: '山阳区人民中路33号'
	})

	const products = ref([
		{ name: '小保养套餐1(合成机油+机滤)', price: 39.9 },
		{ name: '小保养套餐1(合成机油+机滤)', price: 49.9 }
	])

	const coupon = ref(10)

	const total = computed(() => {
		const sum = products.value.reduce((s, p) => s + Number(p.price), 0)
		return (sum - Number(coupon.value)).toFixed(1)
	})

	const discountText = computed(() => `-${coupon.value}元`)

	// 预约弹窗逻辑
	const showReserve = ref(false)
	const selectedTimeIndex = ref(1) // 默认选中第二个时间（3月14日 09:00）
	const scrollTop = ref(0)
	const scrollIntoView = ref('time-1')

	// 生成时间选项数据 - 根据图片中的"立即预约"提示，提供更多时间选项
	const timeOptions = ref([
		{ date: '3月13日', time: '14:00', week: '(今天)', disabled: false },
		{ date: '3月14日', time: '09:00', week: '(明天)', disabled: false },
		{ date: '3月14日', time: '14:00', week: '', disabled: false },
		{ date: '3月14日', time: '17:00', week: '', disabled: false },
		{ date: '3月15日', time: '09:00', week: '(后天)', disabled: false },
		{ date: '3月15日', time: '14:00', week: '', disabled: false },
		{ date: '3月15日', time: '17:00', week: '', disabled: false },
		{ date: '3月16日', time: '09:00', week: '', disabled: true }, // 不可选的时间
		{ date: '3月16日', time: '14:00', week: '', disabled: false },
		{ date: '3月16日', time: '17:00', week: '', disabled: false },
		{ date: '3月17日', time: '09:00', week: '', disabled: false },
		{ date: '3月17日', time: '14:00', week: '', disabled: false },
		{ date: '3月17日', time: '17:00', week: '', disabled: false },
	])

	const currentDateTime = ref('2023年3月13日 11:52')
	const reserveDisplay = ref('立即预约')

	// 电话号码弹窗逻辑
	const showPhone = ref(false)
	const phoneNumber = ref('18656894566')

	// 支付密码弹窗逻辑
	const showPayModal = ref(false)

	const toprepare = () => {
		showReserve.value = true
	}

	const closeReserve = () => {
		showReserve.value = false
	}

	const selectTime = (index) => {
		const option = timeOptions.value[index]
		if (option.disabled) {
			return // 如果是禁用的选项，不执行选择
		}
		selectedTimeIndex.value = index
		scrollIntoView.value = 'time-' + index
	}

	const confirmReserve = () => {
		const selectedOption = timeOptions.value[selectedTimeIndex.value]
		if (selectedOption) {
			reserveDisplay.value = `${selectedOption.date} ${selectedOption.time}`
			uni.showToast({ 
				title: `已选择：${reserveDisplay.value}`, 
				icon: 'success' 
			})
		}
		showReserve.value = false
	}

	const submitOrder = () => {
		showPayModal.value = true
	}

	// 电话号码弹窗相关函数
	const showPhoneModal = () => {
		showPhone.value = true
	}

	const closePhoneModal = () => {
		showPhone.value = false
	}

	const copyPhone = () => {
		uni.setClipboardData({
			data: phoneNumber.value,
			success: () => {
				uni.showToast({
					title: '已复制到剪贴板',
					icon: 'success'
				})
				closePhoneModal()
			}
		})
	}

	// 支付密码弹窗相关函数
	const closePayModal = () => {
		showPayModal.value = false
	}

	const confirmPay = () => {
		uni.navigateTo({
			url:'/pages/Maintenance/payOrder/payOrder'
		})
		showPayModal.value = false
	}
</script>

<style>
	.pages {
		background-color: #f7f8fa;
	}

	.bac {
		background-color: #2b85e4;
		height: 200rpx;
	}

	.outer{
		margin-top: -140rpx;
		padding: 0 20rpx 140rpx;
	}

	.steps{
		display: flex;
		justify-content: space-between;
		padding: 10rpx 10rpx 4rpx;
	}

	.steps-card{ 
		padding-top: 16rpx; 
		padding-bottom: 20rpx; 
	}

	.step .dot{
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
		background: #ffffff;
		color: #2b85e4;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		box-shadow: 0 6rpx 16rpx rgba(43,133,228,0.15);
		font-weight: 600;
	}

	.step.done .dot{
		background: #e8fff0;
		color: #18a058;
		box-shadow: 0 6rpx 16rpx rgba(24,160,88,0.15);
	}

	.step .dot.green {
		color: #18a058;
	}

	.step .dot.blue {
		color: #2b85e4;
	}

	.step .dot.orange {
		color: #ff7a45;
	}

	.dot.orange{ 
		background: #fff3e6; 
		color: #ff7a45; 
		box-shadow: 0 6rpx 16rpx rgba(255,122,69,0.15); 
	}

	.card{
		background-color: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.04);
		margin-bottom: 20rpx;
	}

	.row{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 0;
		border-bottom: 2rpx solid #f4f4f4;
	}
	.row:last-child{ border-bottom: 0; }

	.left.with-ico{ 
		display: flex; 
		align-items: center; 
		gap: 16rpx; 
		flex: 1;
	}
	.ico{ 
		width: 40rpx; 
		height: 40rpx; 
		border-radius: 50%; 
		background: #eaf2ff; 
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
		color: #2b85e4;
		font-weight: 600;
	}
	.ico.store{ 
		background: #eaf2ff; 
	}
	.ico.user{ 
		background: #fff1f0; 
	}
	.ico.time{ 
		background: #fffbe6; 
	}
	.ico.car{ 
		background: #f6ffed; 
	}

	.title{ 
		font-size: 30rpx; 
		font-weight: 600; 
		color: #333; 
	}
	.sub{ 
		margin-top: 6rpx; 
		font-size: 24rpx; 
		color: #8a8a8a; 
	}

	.arrow{ 
		width: 0; 
		height: 0; 
		border-top: 12rpx solid transparent; 
		border-bottom:12rpx solid transparent; 
		border-left: 12rpx solid #c0c0c0; 
	}

	.card-hd{ 
		display: flex; 
		justify-content: space-between; 
		align-items: baseline; 
		padding: 20rpx 0 6rpx; 
	}
	.muted{ 
		color: #8a8a8a; 
		font-size: 24rpx; 
	}

	.prod{ 
		display: grid; 
		grid-template-columns: 24rpx 1fr auto; 
		align-items: center; 
		gap: 16rpx; 
		padding: 18rpx 0; 
	}
	.bullet{ 
		width: 10rpx; 
		height: 10rpx; 
		border-radius: 50%; 
		background: #2b85e4; 
		opacity: .6; 
	}
	.name{ 
		color: #333; 
		font-size: 26rpx; 
		line-height: 1.4; 
	}
	.price{ 
		color: #ff4d4f; 
		font-weight: 700; 
	}
	.price .yen{ 
		font-size: 22rpx; 
		margin-right: 4rpx; 
	}

	.coupon-row{ 
		display: flex; 
		justify-content: space-between; 
		padding: 16rpx 0 10rpx; 
		border-top: 2rpx dashed #f0f0f0; 
	}
	.coupon-left{ 
		color: #333; 
	}
	.coupon-right{ 
		color: #ff4d4f; 
		font-weight: 600;
	}

	.bottom-bar{
		position: fixed;
		left: 0; 
		right: 0; 
		bottom: 0;
		display: flex;
		align-items: center;
		background: #fff;
		padding: 20rpx;
		box-shadow: 0 -6rpx 16rpx rgba(0,0,0,0.06);
		gap: 20rpx;
	}

	.service{ 
		color: #2b85e4; 
		font-size: 26rpx; 
	}
	.total{ 
		flex: 1; 
		text-align: right; 
		color: #8a8a8a; 
	}
	.total text{ 
		color: #ff4d4f; 
		font-weight: 800; 
		font-size: 32rpx;
	}
	.submit{ 
		width: 240rpx; 
		height: 86rpx; 
		border-radius: 43rpx; 
		background: linear-gradient(90deg,#2b85e4,#0a60ff); 
		color: #fff; 
		font-size: 28rpx; 
		box-shadow: 0 6rpx 16rpx rgba(10,96,255,0.25);
		font-weight: 600;
	}

	/* 预约时间弹窗 */
	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
	}

	.modal-content {
		width: 600rpx;
		background-color: #fff;
		border-radius: 24rpx;
		overflow: hidden;
		animation: modalShow 0.3s ease;
	}

	@keyframes modalShow {
		from {
			opacity: 0;
			transform: scale(0.9);
		}
		to {
			opacity: 1;
			transform: scale(1);
		}
	}

	.modal-header {
		padding: 40rpx 30rpx 20rpx;
		text-align: center;
	}

	.modal-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
	}

	.modal-sub {
		font-size: 24rpx;
		color: #8a8a8a;
		margin-top: 8rpx;
	}

	.modal-body {
		padding: 20rpx 30rpx;
		max-height: 600rpx;
	}

	.time-scroll {
		height: 400rpx;
	}

	.time-list {
		padding: 0 20rpx;
	}

	.time-item {
		padding: 30rpx 20rpx;
		margin-bottom: 20rpx;
		background-color: #f8f9fa;
		border-radius: 16rpx;
		text-align: center;
		font-size: 28rpx;
		color: #333;
		border: 2rpx solid transparent;
		transition: all 0.2s;
	}

	.time-item:last-child {
		margin-bottom: 0;
	}

	.time-item-selected {
		background-color: #e8f4ff;
		border-color: #2b85e4;
		color: #2b85e4;
		font-weight: 600;
	}

	.time-item-disabled {
		background-color: #f5f5f5;
		color: #bbb;
		border-color: #eee;
	}

	.time-date {
		font-size: 30rpx;
		font-weight: 600;
		margin-bottom: 8rpx;
	}

	.time-time {
		font-size: 32rpx;
		font-weight: 700;
		margin-bottom: 4rpx;
		color: inherit;
	}

	.time-week {
		font-size: 24rpx;
		color: #999;
	}

	.modal-footer {
		display: flex;
		align-items: center;
		border-top: 1rpx solid #f4f4f4;
	}

	.btn-cancel,
	.btn-confirm {
		flex: 1;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 30rpx;
		border: none;
		background: transparent;
	}

	.btn-cancel {
		color: #666;
	}

	.btn-confirm {
		color: #2b85e4;
		font-weight: 600;
	}

	.divider {
		width: 1rpx;
		height: 60rpx;
		background-color: #f4f4f4;
	}

	/* 电话号码弹窗 */
	.phone-modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		display: flex;
		align-items: flex-end;
		justify-content: center;
		z-index: 999;
		backdrop-filter: blur(4rpx);
	}

	.phone-modal-content {
		width: 100%;
		background-color: #fff;
		border-top-left-radius: 32rpx;
		border-top-right-radius: 32rpx;
		padding: 50rpx 40rpx 60rpx;
		animation: slideUp 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
		box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.12);
	}

	@keyframes slideUp {
		from {
			transform: translateY(100%);
			opacity: 0;
		}
		to {
			transform: translateY(0);
			opacity: 1;
		}
	}

	.phone-number {
		font-size: 56rpx;
		font-weight: 700;
		color: #1a1a1a;
		text-align: center;
		margin-bottom: 80rpx;
		letter-spacing: 4rpx;
		line-height: 1.2;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
	}

	.phone-buttons {
		display: flex;
		gap: 24rpx;
	}

	.btn-copy,
	.btn-cancel-dial {
		flex: 1;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
		font-size: 32rpx;
		border-radius: 48rpx;
		border: none;
		font-weight: 500;
		transition: all 0.2s;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.btn-copy {
		background: linear-gradient(135deg, #2b85e4 0%, #0a60ff 100%);
		color: #fff;
		font-weight: 600;
	}

	.btn-copy:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 8rpx rgba(43, 133, 228, 0.3);
	}

	.btn-cancel-dial {
		background-color: #f5f5f5;
		color: #666;
		border: 1rpx solid #e5e5e5;
	}

	.btn-cancel-dial:active {
		transform: scale(0.98);
		background-color: #ebebeb;
	}

	/* 支付密码弹窗样式 */
	.pay-modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9999;
	}
	
	.pay-modal-content {
		width: 560rpx;
		background-color: #fff;
		border-radius: 24rpx;
		padding: 40rpx 30rpx;
		text-align: center;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
	}
	
	.pay-modal-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #1a1a1a;
		margin-bottom: 12rpx;
	}
	
	.pay-modal-desc {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 32rpx;
	}
	
	.pay-modal-amount {
		font-size: 40rpx;
		color: #ff4d4f;
		font-weight: 700;
		margin-bottom: 32rpx;
	}
	
	.pay-method {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 12rpx;
		margin-bottom: 32rpx;
		font-size: 24rpx;
		color: #333;
	}
	
	.pay-method-value {
		color: #2b85e4;
	}
	
	.pay-password {
		display: flex;
		justify-content: center;
		gap: 20rpx;
		margin-bottom: 40rpx;
	}
	
	.password-dot {
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		background-color: #ccc;
	}
	
	.pay-footer {
		display: flex;
		align-items: center;
		border-top: 1rpx solid #f4f4f4;
	}
	
	.btn-cancel-pay,
	.btn-confirm-pay {
		flex: 1;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 30rpx;
		border: none;
		background: transparent;
	}
	
	.btn-cancel-pay {
		color: #666;
	}
	
	.btn-confirm-pay {
		color: #2b85e4;
		font-weight: 600;
	}
</style>